CSS Subgrid tekislanishi: Ichki joylashtirilgan grid maketining merosxo'rligini o'zlashtirish

CSS Subgrid - bu CSS Grid Layout imkoniyatlarini kengaytiradigan kuchli xususiyat bo'lib, u sizga yanada murakkab va moslashuvchan ichki grid tuzilmalarini yaratishga imkon beradi. U grid elementiga ota-ona gridining yo'lak ta'riflarini meros qilib olish imkonini beradi va ichki joylashtirilgan maketlarda tekislash va masofani misli ko'rilmagan darajada nazorat qilishni ta'minlaydi. Ushbu maqolada CSS Subgridning nozikliklari, uning afzalliklari, qo'llanilish holatlari va kod misollari bilan amaliyotga tatbiq etilishi chuqur o'rganiladi. Biz asosiy tushunchalardan tortib ilg'or texnikalargacha bo'lgan hamma narsani qamrab olamiz, bu sizga Subgrid'dan murakkab va moslashuvchan dizaynlarni yaratishda foydalanish imkoniyatini beradi.

CSS Grid Layout'ni tushunish: Subgrid uchun asos

Subgrid'ga sho'ng'ishdan oldin, CSS Grid Layout haqida mustahkam tushunchaga ega bo'lish muhimdir. Grid Layout - bu ikki o'lchovli maket tizimi bo'lib, u sizga konteynerni qator va ustunlarga bo'lishga, elementlarni esa hosil bo'lgan grid kataklariga joylashtirishga imkon beradi. U elementlarning o'lchami, joylashuvi va tekislanishini nazorat qilish uchun kuchli vositalarni taklif etadi.

Quyida CSS Grid konteynerining asosiy misoli keltirilgan:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}
            

              
                Copy
              
            
          

Ushbu misolda biz teng kenglikdagi uchta ustun (1fr) va avtomatik balandlikka ega ikkita qatordan iborat grid konteynerini yaratdik. gap xususiyati grid elementlari orasiga masofa qo'shadi.

CSS Subgrid bilan tanishuv: Grid imkoniyatlarini kengaytirish

Subgrid CSS Grid poydevoriga asoslanadi va ichki joylashtirilgan gridga ota-ona gridining yo'lak ta'riflarini (qatorlar va ustunlar) meros qilib olish imkonini beradi. Bu shuni anglatadiki, siz ichki grid ichidagi elementlarni tashqi gridning yo'laklari bilan tekislashingiz mumkin, bu esa yaxlit va vizual jihatdan izchil maket yaratadi. Bu, ayniqsa, elementlar bir nechta qator yoki ustunlarni qamrab olishi kerak bo'lgan murakkab maketlar uchun foydalidir.

CSS Subgrid'dan foydalanishning asosiy afzalliklari:

• Yaxshilangan tekislanish: Subgrid ichki grid elementlari va ota-ona grid yo'laklari o'rtasida aniq tekislanishni ta'minlaydi.
• Murakkablikni kamaytirish: Ota-ona griddagi yo'lak o'lchamlari va joylashuvlarini belgilash va ularni subgriddan meros qilib olish orqali murakkab maketlarni soddalashtiradi.
• Moslashuvchanlikni oshirish: Subgridlarning ota-ona gridining o'lchami va shakliga moslashishiga imkon berib, moslashuvchan dizaynni osonlashtiradi.
• Qo'llab-quvvatlash qulayligi: Yo'lak ta'riflarini ota-ona gridida markazlashtirish orqali kodni qo'llab-quvvatlashni yaxshilaydi.

CSS Subgrid'ni qo'llash: Amaliy qo'llanma

Subgrid'ni qo'llash uchun siz grid elementini grid-template-columns va/yoki grid-template-rows xususiyatlarini subgrid qiymatiga o'rnatish orqali subgrid deb e'lon qilishingiz kerak. Bu brauzerga ota-ona griddan yo'lak ta'riflarini meros qilib olishni bildiradi.

Misol: Asosiy Subgrid maketini yaratish

Keling, uchta ustun va ikkita qatordan iborat asosiy grid maketimiz bor bo'lgan stsenariyni ko'rib chiqaylik. Biz grid elementlaridan birining ichida asosiy grid ustunlari bilan tekislanadigan subgrid yaratmoqchimiz.

            <div class="grid-container">
  <div class="grid-item item1">Item 1</div>
  <div class="grid-item item2">Item 2</div>
  <div class="grid-item item3">Item 3</div>
  <div class="grid-item item4">Item 4</div>
  <div class="grid-item item5">Item 5
    <div class="subgrid-container">
      <div class="subgrid-item">Subitem 1</div>
      <div class="subgrid-item">Subitem 2</div>
      <div class="subgrid-item">Subitem 3</div>
    </div>
  </div>
  <div class="grid-item item6">Item 6</div>
</div>
            

              
                Copy
              
            
          

Endi, CSS kodini qo'shamiz:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  width: 80%;
  margin: 20px auto;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

.item5 {
  display: grid; /* Enables grid layout for this item */
}

.subgrid-container {
  display: grid;
  grid-column: 1 / -1; /* Span all columns of the parent grid item */
  grid-template-columns: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

.subgrid-item {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #bbb;
}
            

              
                Copy
              
            
          

Ushbu misolda .subgrid-container .grid-containerdan ustun yo'laklarini meros qilib oladigan subgriddir. Biz .subgrid-containerga `grid-column: 1 / -1;` ni qo'llaymiz, bu uning .grid-item.item5 ning butun kengligini egallashini ta'minlaydi va subgridning ota-ona grid ustunlari bilan tekislanishini kafolatlaydi. Subgrid elementlari avtomatik ravishda ota-ona gridida belgilangan ustunlar bilan tekislanadi.

Nomlangan grid chiziqlari yordamida yo'laklarni aniq o'lchamlash

Murakkabroq maketlar uchun siz yo'lak o'lchamlarini aniq belgilashni va nomlangan grid chiziqlaridan foydalanishni xohlashingiz mumkin. Bu sizning kodingizda ko'proq nazorat va aniqlikni ta'minlaydi.

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-mid] 2fr [col-end];
  grid-template-rows: [row-start] auto [row-mid] auto [row-end];
  gap: 10px;
}

.subgrid-container {
  display: grid;
  grid-column: 1 / -1; /* Span all columns of the parent grid item */
  grid-template-columns: subgrid [col-start] [col-mid] [col-end];
  grid-template-rows: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

            

              
                Copy
              
            
          

Bu yerda biz ota-ona gridida nomlangan grid chiziqlarini (col-start, col-mid, col-end, row-start, row-mid, row-end) belgiladik. Subgrid bu nomlangan chiziqlarni meros qilib oladi, bu sizga subgrid ichidagi elementlarni ushbu nomlardan foydalanib joylashtirish imkonini beradi.

Subgridning ilg'or texnikalari

Subgridda yo'laklarni qoplash

Oddiy gridda bo'lgani kabi, subgridda ham yo'laklarni qoplashingiz mumkin. Bu sizga subgrid ichida bir nechta qator yoki ustunlarni egallaydigan elementlarni yaratishga imkon beradi.

            .subgrid-item-span {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
            

              
                Copy
              
            
          

Bu elementni subgrid ichida ikkita ustun va ikkita qatorni egallashiga sabab bo'ladi.

Subgrid bilan grid-auto-flowdan foydalanish

grid-auto-flow xususiyati avtomatik joylashtirilgan elementlarning gridga qanday kiritilishini nazorat qiladi. U subgrid bilan birgalikda elementlar joylashtiriladigan yo'nalishni boshqarish uchun ishlatilishi mumkin.

            .subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-flow: row dense; /* Example value */
}

            

              
                Copy
              
            
          

row dense qiymati elementlarni qatorlardagi har qanday bo'shliqlarni to'ldirishga majbur qiladi, column dense qiymati esa ustunlardagi bo'shliqlarni to'ldiradi.

Subgridda yashirin yo'laklarni boshqarish

Agar subgrid elementi aniq belgilangan yo'laklardan tashqarida joylashtirilsa, yashirin yo'laklar yaratiladi. Siz ushbu yashirin yo'laklarning o'lchamini grid-auto-rows va grid-auto-columns xususiyatlari yordamida nazorat qilishingiz mumkin.

            .subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: minmax(100px, auto);
}

            

              
                Copy
              
            
          

Bu har qanday yashirin ravishda yaratilgan qatorlarning minimal balandligi 100px bo'lishini va kontent hajmiga qarab avtomatik ravishda moslashishini ta'minlaydi.

CSS Subgridning real hayotdagi qo'llanilish holatlari

CSS Subgrid turli real hayotiy stsenariylarda murakkab maketlarni yaratish uchun ayniqsa foydalidir:

• Formalar maketlari: Forma yorliqlari va kiritish maydonlarini izchil grid tuzilmasi bilan tekislash. Yorliqlar uzunligi har xil bo'lgan ko'p tilli formani tasavvur qiling. Subgrid yorliq uzunligidan qat'i nazar, kiritish maydonlari har doim tekislangan bo'lishini ta'minlaydi.
• Mahsulotlar ro'yxati: Rasmlar, sarlavhalar va tavsiflarning izchil tekislanishi bilan vizual jozibador mahsulotlar ro'yxatini yaratish. Turli mamlakatlardan mahsulot sotadigan elektron tijorat platformasini ko'rib chiqing. Subgrid mahsulot nomi uzunligi yoki tavsiflaridagi o'zgarishlarga qaramay, mahsulot tafsilotlarining izchil tekislanishini saqlashga yordam beradi.
• Boshqaruv paneli interfeyslari: Bir-biri bilan tekislanishi kerak bo'lgan bir nechta panel va vidjetlar bilan murakkab boshqaruv paneli interfeyslarini qurish. Grafiklar, jadvallar va asosiy samaradorlik ko'rsatkichlarini aks ettiruvchi moliyaviy boshqaruv panelini o'ylab ko'ring. Subgrid barcha elementlarning mukammal tekislanishini ta'minlab, professional va foydalanuvchiga qulay tajriba yaratadi.
• Jurnal maketlari: Bir nechta ustunlar bo'ylab tekislanishi kerak bo'lgan maqolalar, rasmlar va sarlavhalar bilan jurnal uslubidagi maketlarni loyihalash. Masalan, yangiliklar veb-sayti kontent turidan qat'i nazar, bosh sahifaning turli bo'limlarida izchil grid tuzilmasini saqlash uchun subgrid'dan foydalanishi mumkin.
• Taqvim ko'rinishlari: Voqealarni ma'lum kunlar va vaqtlar bilan tekislash kerak bo'lgan taqvim ko'rinishlarini amalga oshirish.

CSS Subgridning brauzerlarda qo'llab-quvvatlanishi

CSS Subgridni zamonaviy brauzerlarda qo'llab-quvvatlash odatda yaxshi darajada. U Firefox, Chrome, Safari va Edge'da qo'llab-quvvatlanadi. Biroq, maqsadli auditoriyangiz uchun qo'llab-quvvatlashni ta'minlash uchun har doim Can I use kabi veb-saytlardagi eng so'nggi brauzer moslik jadvallarini tekshirish yaxshi fikrdir. Shuningdek, eski brauzerlar uchun zaxira variantini taqdim etish uchun progressiv yaxshilash usullaridan foydalanishni ham o'ylab ko'rishingiz mumkin.

Maxsus imkoniyatlarni hisobga olish

CSS Subgriddan foydalanganda maxsus imkoniyatlarni hisobga olish muhimdir. Maketning nogironligi bo'lgan foydalanuvchilar uchun mantiqiy va navigatsiya qilish oson ekanligiga ishonch hosil qiling. Maxsus imkoniyatlarni yaxshilash uchun semantik HTML elementlaridan foydalaning va tegishli ARIA atributlarini taqdim eting. Har qanday potentsial muammolarni aniqlash va hal qilish uchun maketingizni ekran o'quvchilari va klaviatura navigatsiyasi bilan sinab ko'ring. HTML manbasida to'g'ri tartiblangan kontent ekran o'quvchilari uchun juda muhimdir. Ma'lumotni yetkazish uchun faqat vizual maketga tayanmang.

CSS Subgrid va an'anaviy maketlash usullari

Float va flexbox kabi an'anaviy maketlash usullari bilan taqqoslaganda, CSS Subgrid bir qator afzalliklarni taklif etadi:

• Ikki o'lchovli maket: Subgrid ikki o'lchovli maketlar uchun mo'ljallangan, flexbox esa asosan bir o'lchovli maketlar uchun.
• Tekislash nazorati: Subgrid ichki grid elementlari va ota-ona gridining yo'laklari o'rtasida aniqroq tekislash nazoratini ta'minlaydi.
• Murakkablikni kamaytirish: Subgrid ota-ona gridida yo'lak o'lchamlari va joylashuvlarini belgilash va ularni subgriddan meros qilib olish orqali murakkab maketlarni soddalashtirishi mumkin.

Flexbox elementlarni bitta qator yoki ustunda joylashtirish uchun a'lo darajada bo'lsa-da, Subgrid aniq tekislash bilan murakkab, ikki o'lchovli maketlarni yaratishda ustunlik qiladi.

CSS Subgrid'dan foydalanish bo'yicha maslahatlar va eng yaxshi amaliyotlar

• Aniq reja bilan boshlang: Subgrid'ni qo'llashdan oldin, maketingizni diqqat bilan rejalashtiring va Subgrid eng ko'p foyda keltirishi mumkin bo'lgan sohalarni aniqlang.
• Nomlangan grid chiziqlaridan foydalaning: Nomlangan grid chiziqlari kodingizning o'qilishi va qo'llab-quvvatlanishini yaxshilashi mumkin.
• Puxta sinovdan o'tkazing: Moslik va moslashuvchanlikni ta'minlash uchun maketingizni turli brauzerlar va qurilmalarda sinab ko'ring.
• Maxsus imkoniyatlarni hisobga oling: Maketingiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling.
• Mazmunli klass nomlaridan foydalaning: Kodning o'qilishini va qo'llab-quvvatlanishini yaxshilash uchun aniq va tavsiflovchi klass nomlarini ishlating. Masalan, `item1` yoki `container` kabi umumiy nomlar o'rniga, elementning mazmuni yoki funktsiyasini aks ettiruvchi nomlarni tanlang, masalan, `product-image` yoki `navigation-menu`. Bu har bir elementning maqsadini tushunishni va keyinchalik kodni o'zgartirishni osonlashtiradi.
• Kodingizni hujjatlashtiring: Turli bo'limlarning maqsadi va ularning birgalikda qanday ishlashini tushuntirish uchun CSS va HTML kodingizga izohlar qo'shing. Bu, ayniqsa, bir qarashda tushunish qiyin bo'lishi mumkin bo'lgan murakkab maketlar uchun foydalidir. Yaxshi hujjatlashtirilgan kod boshqa dasturchilar (yoki kelajakda o'zingiz) uchun maketni saqlash va o'zgartirishni osonlashtiradi.

CSS Subgrid maketlarini tuzatish

CSS Subgrid maketlarini tuzatish ba'zan qiyin bo'lishi mumkin. Quyida keng tarqalgan muammolarni bartaraf etishga yordam beradigan ba'zi maslahatlar keltirilgan:

• Brauzer dasturchi vositalaridan foydalaning: Brauzer dasturchi vositalari CSS Grid va Subgrid maketlarini tekshirish uchun kuchli xususiyatlarni taqdim etadi. Siz grid chiziqlari, yo'lak o'lchamlari va elementlarning joylashuvini vizualizatsiya qilishingiz mumkin.
• Konsoldagi xatolarni tekshiring: Brauzer konsolida har qanday CSS xatolari yoki ogohlantirishlarini qidiring.
• Maketni soddalashtiring: Agar murakkab maket bilan muammoga duch kelsangiz, muammoli joyni ajratib olish uchun uni soddalashtirishga harakat qiling.
• CSS kodingizni tekshiring: Sintaksis xatolari va boshqa muammolarni tekshirish uchun CSS validatoridan foydalaning.
• Hisoblangan uslublarni tekshiring: Har bir elementga qo'llanilgan yakuniy hisoblangan uslublarni, shu jumladan meros qilib olingan uslublarni tekshirish uchun brauzerning dasturchi vositalaridagi "Computed" yorlig'idan foydalaning.

Xulosa: CSS Subgrid kuchini qabul qilish

CSS Subgrid murakkab va moslashuvchan ichki grid maketlarini yaratish uchun qimmatli vositadir. Uning xususiyatlari va afzalliklarini tushunib, siz Subgriddan veb-dizayn ko'nikmalaringizni oshirish va yanada murakkab va vizual jozibador veb-saytlar yaratish uchun foydalanishingiz mumkin. Forma maketlari, mahsulotlar ro'yxati yoki boshqaruv paneli interfeyslarini loyihalashtirayotgan bo'lsangiz ham, Subgrid sizga mukammal maketlarni yaratish uchun kerakli moslashuvchanlik va nazoratni ta'minlaydi. Brauzerlarni qo'llab-quvvatlash yaxshilanishda davom etar ekan, Subgrid har bir front-end dasturchining asboblar to'plamining ajralmas qismiga aylanishga tayyor.

Ushbu maqolada keltirilgan misollar bilan tajriba o'tkazing va CSS Subgridning turli xususiyatlarini o'rganing. Amaliyot bilan siz Subgridni o'zlashtirib, ham funktsional, ham vizual jozibador ajoyib veb-makletlarni yaratishingiz mumkin bo'ladi. Texnologiya bo'yicha ko'nikmalaringiz va tushunchangizni yanada oshirish uchun CSS Grid va Subgrid'dan foydalanadigan ochiq manbali loyihalarga hissa qo'shishni o'ylab ko'ring.

Qo'shimcha manbalar

• MDN Web Docs: CSS Subgrid Layout
• CSS Grid Layout Module Level 2
• Can I use: CSS Subgrid